<template>
  <div class="news-center" :key="$route.params.type">
     <el-breadcrumb separator-class="el-icon-arrow-right" style="height:30px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{className[$route.params.type].cname}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="tac" :gutter="80" style="margin-top: 25px">
      <el-col :span="6" class="news-nav hidden-xs-only">
        <el-menu
          :default-active="$route.hash"
          class="el-menu-vertical-demo"
          :router="true"
          >
          <el-menu-item v-for="(item, key) in typeName[$route.params.type]" :key="key" :index="key">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">{{item}}</span>
            <span class="sub-title">{{className[$route.params.type].name}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="18" :xs="24" class="news-list">
        <TabItem :item-data="newsList.results" :item-type="$route.params.type"></TabItem>
        <div  style="text-align: center; position: absolute; bottom: 20px; left: 0; width:100%">
          <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size = "5"
                :total="newsList.count">
        </el-pagination>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TabItem from "../components/TabItem";
export default {
  data() {
    return {
      newsList: '',
      className: {
        journalism: {
          name: 'NEWS',
          cname: '新闻中心'
        },
         laborunion: {
          name: 'ACTIVITIES',
          cname: '党团工会'
        }
      },
      arType: {
        journalism: {
          '#all' : '',
          '#news' : '1',
          '#pro' : '2',
          '#media' : '3'
        },
        laborunion: {
          '#all' : '',
          '#dynamic': '1',
          '#teach': '2'
        }
      },
      typeName: {
        journalism: {
          '#all' : '新闻中心',
          '#news' : '公司新闻',
          '#pro' : '项目动态',
          '#media' : '媒体动态'
        },
        laborunion: {
          '#all' : '党团工会',
          '#dynamic': '方兴利党支部',
          '#teach': '工会活动'
        }
      }
    }
  },
  created() {
    this.getNewList(1, this.arType[this.$route.params.type][this.$route.hash])
  },
  watch: {
    $route: function () {
      this.getNewList(1, this.arType[this.$route.params.type][this.$route.hash])
    }
  },
  methods: {
      getNewList(page, article_type) {
        this.$request({url: `/${this.$route.params.type}/?page=${page}&size=5${article_type ? `&article_type=${article_type}`: ''}`}).then(
        result => {
          const {data} = result;
          this.newsList =data
        }
      )
    },
     handleCurrentChange(val) {
       this.getNewList(val, this.arType[this.$route.params.type][this.$route.hash])
      }
  },
  components: {
    TabItem
  }
}
</script>


<style lang="stylus">
  .news-center
    margin: 0 auto;
    margin-top 98px
    max-width: 1160px;
    box-sizing border-box
    width 100%
    padding: 0 20px
    .news-nav
      .el-menu-item
        padding 0 !important
        margin 0 20px
        font-weight 500
        color #494949
        border-bottom 1px solid #a6a6a6
        .sub-title
          display none
        &:first-child 
          height: 75px;
          position relative
          margin-top 10px
          border-bottom-width: 2px;
          .sub-title
            display block
            position absolute
            bottom -5px
            font-size 12px
            font-weight 400
          i
            display none
        &:last-child
          border none
      .el-menu-item.is-active
        color #d3202a
      .el-menu-item:first-child.is-active
        color #000
      .el-menu-item:focus, .el-menu-item:hover
        background-color #fff  
      .title-top
        box-sizing border-box
        width 100%
        border 1px solid #e8e8e8
        border-bottom 0
        padding 0 20px
        padding-top 20px
        h5
          color #000
          font-size 16px
          font-weight 400
          height 35px
          padding-top 13px
          line-height 20px
          box-sizing: border-box;
        p
          font-size 12px
          height 25px
          line-height 20px
          border-bottom 2px solid #a6a6a6

      .el-menu
        border 1px solid #e8e8e8
        padding-bottom 20px
    .news-list
      position relative
      border 1px solid #e8e8e8
      padding 30px
      margin-bottom 30px
      min-height: 657px;
      padding-bottom 50px
    
  @media (max-width 765px)
    .news-center
      margin-top 0
      .tac
        margin 0 !important
      .news-list
        border none
        padding 0 0 50px 0 !important
        width 100%
    .el-breadcrumb
      background: #fff;
      width: 100%;
      line-height 30px
</style>

